import React from 'react';
import { connect } from 'dva';
import { Form, Input, Modal, Select, message, Row, Col } from 'antd';
import { patternObj } from '../../utils/regExp';
import { isReleaseVersion } from '../../components/permissionControl';
import { api as apiPaths } from '../../services/device';

const FormItem = Form.Item;

const styles = {
	input: {
		display: 'inline-block',
		width: '13em'
	},
};

class MyModal extends React.Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			serviceModeList: [],
			serviceName: '',
			selectedMode: {},

			productId: '',
			productName: '',

			launchAreaList: [],
			launchAreaName: '',
			selectedLaunchArea: {}
		};
	}

	componentWillMount() {
		this.queryService();
		this.queryLaunchArea();
	}

	componentDidMount() {
		const { productList, dispatch } = this.props;
		if (!productList && !productList.list) {
			dispatch({
				type: 'productList/query'
			});
		}
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.serviceMode && nextProps.serviceMode.list) {
			this.setState({ serviceModeList: nextProps.serviceMode.list });
		}
		if (nextProps.deviceLaunchArea && nextProps.deviceLaunchArea.list) {
			this.setState({ launchAreaList: nextProps.deviceLaunchArea.list });
		}
		if (this.props.isShowAdd !== nextProps.isShowAdd && nextProps.isShowAdd === true) {
			this.setState({
				serviceModeList: [],
				serviceName: '',
				selectedMode: {},

				productId: '',
				productName: '',

				launchAreaList: [],
				launchAreaName: '',
				selectedLaunchArea: {}
			});
			this.props.form.setFieldsValue({ name: '', mac: '' });
		}
	}

	onChangeServiceMode = (value) => {
		let isId = false;
		this.state.serviceModeList.forEach(d => {
			if (d.id === value) {
				isId = true;
				this.setState({ serviceName: d.serviceMode });
			}
		});
		isId ? '' : this.setState({ serviceName: value });

		this.queryService(value);
	}

	onSelectServiceMode = (value, option) => {
		this.state.serviceModeList.forEach(d => {
			if (d.id === value) {
				this.setState({
					selectedMode: d,
					serviceName: d.serviceMode,
				});
			}
		});
	}

	onChangeLaunchArea = (value) => {
		let isId = false;
		this.state.launchAreaList.forEach(d => {
			if (d.id === value) {
				isId = true;
				this.setState({ launchAreaName: d.name });
			}
		});
		isId ? '' : this.setState({ launchAreaName: value });
		this.queryLaunchArea(value);
	}

	onSelectLaunchArea = (value, option) => {
		this.state.launchAreaList.forEach(d => {
			if (d.id === value) {
				this.setState({
					selectedLaunchArea: d,
					launchAreaName: d.name
				});
			}
		});
	}

	queryService = () => {
		const { dispatch } = this.props;
		const { productId } = this.state;
		dispatch({
			type: 'serviceMode/query',
			payload: {
				query: {
					productId
				}
			}
		});
	}

	queryLaunchArea = () => {
		const { dispatch } = this.props;
		dispatch({
			type: 'deviceLaunchArea/query',
			payload: {
				query: {}
			}
		});
	}

	productChange = productId => {
		const { queryData } = this.state;
		this.props.productList.list.forEach(d => {
			if (d.id === productId) {
				this.setState({
					productId,
					productName: d.name,
					serviceModeList: []
				}, this.queryService);
			}
		});
	}

	save = (e) => {
		this.props.form.validateFields((err, values) => {
			if (!err) {
				if (!this.state.productId) {
					message.error('请选择所属产品', 2);
				} else {
					const postData = { ...values };
					postData.productId = this.state.productId;
					postData.productName = this.state.productName;
					postData.productServiceModeId = this.state.selectedMode.id;
					postData.productServiceModeName = this.state.selectedMode.serviceMode;
					if (!!this.state.selectedLaunchArea.id) {
						postData.deviceLaunchAreaId = this.state.selectedLaunchArea.id;
						postData.deivceLaunchAreaName = this.state.selectedLaunchArea.name;
					}
					this.props.dispatch({
						type: 'device/createDevice',
						payload: {
							...postData
						}
					});
				}
			}
		});
	}


	render() {
		const { isShowAdd, handleCancel, user: { permissions } } = this.props;
		const { serviceName, productId, name, mac, serviceModeList, launchAreaList } = this.state;
		const { getFieldDecorator } = this.props.form;
		const optionsServiceMode = productId ? serviceModeList.map(d => <Option key={d.id} value={d.id}>{d.serviceMode}</Option>) : null;
		const optionsLaunchArea = launchAreaList.map(d => <Option key={d.id} value={d.id}>{d.name}</Option>);
		const productList = this.props.productList.list;

		const isRelease = isReleaseVersion(permissions, apiPaths.query);
		return (
			<Modal
				width={800}
				title={'添加设备'}
				visible={isShowAdd}
				onCancel={handleCancel}
				onOk={this.save}
				cancelText={'关闭'}
			>
				<Form>
					<Row gutter={16}>
						<Col span={6} offset={1}>
							<FormItem label="设备名称" labelCol={{ span: 24 }} wrapperCol={{ span: 16 }} required>
								{getFieldDecorator('name', {
									initialValue: name,
									rules: [
										{ required: true, whitespace: true, message: '请输入设备名称!' },
										patternObj('name')
									],
								})(<Input style={styles.input} />)}
							</FormItem>
						</Col>
						<Col span={6} offset={1}>
							<FormItem label="设备MAC地址" labelCol={{ span: 24 }} wrapperCol={{ span: 16 }} required>
								{getFieldDecorator('mac', {
									initialValue: mac,
									rules: [
										{ required: true, whitespace: true, message: '请输入设备MAC地址!' },
										patternObj('mac')
									],
								})(<Input style={styles.input} />)}
							</FormItem>
						</Col>
						<Col span={6} offset={1}>
							<FormItem label="所属产品" labelCol={{ span: 24 }} wrapperCol={{ span: 16 }} required>
								<Select value={productId} onChange={this.productChange} style={styles.input}>
									{productList.map(p => <Option key={p.id} value={p.id}>{p.name}</Option>)}
								</Select>
							</FormItem>
						</Col>
					</Row>
					{/* <Row gutter={16}>
						{
							isRelease ? null : null
						}
					</Row> */}
				</Form>
			</Modal>
		);
	}
}

const modal = Form.create({
	onValuesChange: (props, values) => {

	}
})(MyModal);

export default connect(({ device, serviceMode, productList, deviceLaunchArea, app }) => ({ device, serviceMode, productList, deviceLaunchArea, user: app.user }))(modal);
